<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>歌曲管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="musicSearchKey" placeholder="输入音乐名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search"
                   @click="getAllMusic((pageParam.currentPage * pageParam.pageSize) - pageParam.pageSize, pageParam.pageSize,musicSearchKey)">
          搜索
        </el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addMusicInfoVisible=true">导入酷狗音乐</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="musicList" highlight-current-row border element-loading-text="拼命加载中"
              style="width: 100%;text-align: center">
      <el-table-column sortable prop="img" label="专辑封面" width="200" align="center">
        <template slot-scope="scope">
          <el-image :src="scope.row.img" style="width: 100px;height: 100px"></el-image>
        </template>
      </el-table-column>
      <el-table-column sortable prop="audioName" label="音乐名" width="300">
      </el-table-column>
      <el-table-column sortable prop="authorName" label="歌手" width="200">
      </el-table-column>
      <el-table-column sortable prop="updateTime" label="添加时间" width="200">
      </el-table-column>
      <el-table-column sortable prop="playCount" label="播放热度">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="showMusicDetail(scope.$index)">详情</el-button>
          <el-button size="mini" @click="updateMusic(scope.$index)">自动补充</el-button>
          <el-popconfirm
            style="margin-left: 10px"
            confirm-button-text='已知晓'
            cancel-button-text='我点错了'
            icon="el-icon-info"
            icon-color="red"
            title="删除不可逆，请谨慎操作"
            @confirm="deleteMusic(scope.row.id)"
          >
            <el-button size="mini" type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParam.currentPage"
      :page-sizes="[10, 50, 100, 500]"
      :page-size="pageParam.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageParam.total">
    </el-pagination>
    <!--详情-->
    <el-dialog title="音乐详情" :visible.sync="musicInfoVisible" width="60%">
      <el-descriptions :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            歌曲全名
          </template>
          {{musicList[musicDialog].audioName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            专辑名
          </template>
          {{musicList[musicDialog].albumName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            专辑ID
          </template>
          {{musicList[musicDialog].albumId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            歌曲HASH
          </template>
          {{musicList[musicDialog].hash}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            歌曲时长
          </template>
          {{musicList[musicDialog].timeLength}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            歌曲文件大小
          </template>
          {{musicList[musicDialog].fileSize}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            歌手ID
          </template>
          {{musicList[musicDialog].audioId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            播放地址
          </template>
          {{musicList[musicDialog].playUrl}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!--添加音乐-->
    <el-dialog title="添加音乐" :visible.sync="addMusicInfoVisible" width="60%">
      <el-input size="small" v-model="addMusicSearchKey" placeholder="输入音乐名称" style="width: 50%">
        <el-button slot="append" size="small" type="primary" icon="el-icon-search" @click="onlineSearchMusic">
          搜索
        </el-button>
      </el-input>
      <span style="margin-left: 20px">注：在线搜索酷狗歌曲展示在下方</span>
      <el-table
        ref="multipleTable"
        :data="addMusicList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="filename" label="歌曲全名" width="300">
          <template slot-scope="scope">
            <div v-html="scope.row.filename"></div>
          </template>
        </el-table-column>
        <el-table-column prop="album_name" label="专辑名" width="200">
          <template slot-scope="scope">
            <div v-html="scope.row.album_name"></div>
          </template>
        </el-table-column>
        <el-table-column prop="singername" label="歌手" width="120">
          <template slot-scope="scope">
            <div v-html="scope.row.singername"></div>
          </template>
        </el-table-column>
        <el-table-column prop="filesize" label="文件大小" width="120">
        </el-table-column>
        <el-table-column prop="extname" label="文件类型" width="110">
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;text-align: right">
        <el-button size="small" type="primary" @click="importMusic">导入</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Music",
    data() {
      return {
        musicSearchKey: '',
        addMusicSearchKey: '',
        musicList: [],
        addMusicList: [],
        onlineMusicList: [],
        // 分页参数
        pageParam: {
          currentPage: 1,
          pageSize: 10,
          total: 1000
        },
        musicInfoVisible: false,
        addMusicInfoVisible: false,
        musicDialog: 0,

      }
    },
    created() {
      this.getAllMusic((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, '')
    },
    mounted() {
    },
    methods: {
      //删除音乐
      deleteMusic(index) {
        if (index===undefined){
          this.$notify.info({
            title: '提示',
            message: '删除错误'
          });
        }else {
          this.$axios({
            method:'post',
            url:'/musicControl/deleteMusic/'+index,
            headers: {
              authentication: localStorage.getItem("adminToken")
            },
          }).then(res=>{
            if (res.data.msgCode==='200'){
              this.$message.success(res.data.msg);
            }else {
              this.$message.error(res.data.msg);
            }
            this.getAllMusic((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.musicSearchKey);
          })
        }

      },
      //导入音乐
      importMusic() {
        if (this.onlineMusicList.length===0){
          this.$notify.info({
            title: '提示',
            message: '您未选择导入音乐'
          });
        }else {
          this.$axios({
            method: 'post',
            url: '/musicControl/importMusic',
            headers: {
              authentication: localStorage.getItem("adminToken")
            },
            data: {
              musicList: this.onlineMusicList
            }
          }).then(res => {
            if (res.data.msgCode === '200') {
              this.$message.success(res.data.msg);
            } else {
              this.$message.warning(res.data.msg);
            }
          })
        }

      },
      //在线搜索酷狗音乐
      onlineSearchMusic() {
        this.$axios({
          method: 'post',
          url: '/musicControl/onlineMusicSearch',
          data: {
            musicSearchKey: this.addMusicSearchKey
          },
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          this.addMusicList = res.data.data.info;
        })
      },
      handleSelectionChange(val) {
        console.log(val);
        this.onlineMusicList = val;
      },
      //更新歌曲
      updateMusic(index) {
        let hash = this.musicList[index].hash;
        let albumId = this.musicList[index].albumId;
        this.$axios({
          method: 'post',
          url: '/musicControl/updateMusic/' + hash + '/' + albumId,
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          if (res.data.msgCode === '200') {
            this.$message.success('同步成功');
            this.getAllMusic((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.musicSearchKey)
          } else if (res.data.msgCode === '-1') {
            this.$message.error('同步失败,无权限');
          } else {
            this.$message.warning('同步失败');
          }
        })
      },
      showMusicDetail(index) {
        this.musicInfoVisible = true;
        this.musicDialog = index;
      },
      handleSizeChange(item) {
        this.pageParam.pageSize = item;
        this.getAllMusic((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.musicSearchKey)
      },
      //页数改变时
      handleCurrentChange(item) {
        this.pageParam.currentPage = item;
        this.getAllMusic((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.musicSearchKey)
      },
      getAllMusic(start, size, musicSearchKey) {
        this.$axios({
          method: 'post',
          url: '/musicControl/getAllMusic/' + start + "/" + size,
          data: {
            musicSearchKey: musicSearchKey
          },
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          console.log(this.musicList);
          this.pageParam.total = res.data.data.total;
          if (this.pageParam.total === 0) {
            this.musicList = [{audioName: '未找到该音乐'}]
          } else {
            this.musicList = res.data.data.info;
          }
          console.log(this.musicList);
        })
      }
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
</style>
